<template>
    <div class="header">
        <div class="search">
            <el-input v-model="input" placeholder="搜索内容" style="width: 500px" ></el-input>
            <el-button type="primary" disabled>搜索</el-button>
        </div>
        <div class="user">
            <div class="userAvatar"></div>
            <div class="username">Wayne</div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                input: ''
            }
        }
    }
</script>

<style scoped lang="less">
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        .search{
            /deep/.el-button{
                border-radius:0 4px 4px 0
            }
            /deep/.el-input{
                border-radius:4px 0 0 4px
            }
        }
        .user{
            display: flex;
            align-items: center;
            .userAvatar{
                width: 36px;
                height: 36px;
                opacity: 0.2;
                background: #000000;
                border-radius: 50%;
                margin-right: 10px;
            }
            .username{
                margin-right: 60px;
            }
        }
    }
</style>
